import React, { PropTypes, PureComponent } from 'react';
import { autobind } from 'core-decorators';
import _ from 'lodash';

import IECharts from '../common/IECharts';

export default class AssetRatio extends PureComponent {
  static propTypes = {

  }

  constructor(props) {
    super(props);
  }

  render() {
    const { assetRatioData } = this.props;
    const assetDataArr = [];
    assetRatioData.forEach((item) => {
      assetDataArr.push({ name: item[0], value: item[1] });
    });
    const options = {
      title: {
	        text: '不同资产比',
	        x: 'left',
	        padding: [0, 10],
	        textStyle: {
		      	fontSize: 20,
		      	fontFamily: '微软雅黑',
	      	},
	      },
	      tooltip: {
	        trigger: 'item',
	        formatter: '{a} <br/>{b} : {c} (%)',
	      },
	      color: ['rgb(236,204,77)', 'rgb(50,183,55)', 'rgb(205,220,57)', 'rgb(95,186,220)', 'rgb(220,72,72)'],
	      legend: {
	        orient: 'vertical',
	        left: 'left',
	        itemWidth: 10,
	        itemHeight: 10,
	        padding: [90, 0],
	        data: ['其他', '期货', '债券', '股票', '基金'],
    		},
	      series: [
	        {
	          name: '',
	          type: 'pie',
	          radius: '55%',
	          center: ['50%', '50%'],
	          data: assetDataArr,
	          itemStyle: {
	            emphasis: {
	              shadowBlur: 10,
	              shadowOffsetX: 0,
	              shadowColor: 'rgba(0, 0, 0, 0)',
	            },
	          },
	        },
	      ],
    };
    return (
      <IECharts option={options} />
    );
  }
}
